import React, { useEffect, useState } from 'react'
import { NavBar } from 'antd-mobile'
import { useLocation, useNavigate } from 'react-router'
import './style.css'
import { Cell, Popup, PopupPosition } from 'react-vant'
import { Input } from 'react-vant';
import { StarO, GoodJobO, GoodJob, ShopO } from '@react-vant/icons'
import { ActionBar } from 'react-vant';
function index() {
    const nav = useNavigate();

    const back = () => {
        nav(-1);
    }
    const loadsh = useLocation().state?.item;
    console.log(loadsh);

    const hangdleClick = () => {
        console.log("点击了关注")
    }

    const [show, setShow] = useState(false);
    const givealike = () => {
        setShow(!show);
    }
    const [buttoon, setButtoon] = useState<PopupPosition>('')

    const onClose = () => setButtoon('')

    const Pinpayment = (loadsh: any) => {
        console.log(loadsh)
        nav('/pinpayment', {
            state: {
                loadsh
            }
        })
    }
    return (

        <div>
            <div>
                <NavBar onBack={back}>{loadsh.shanc}</NavBar>
                <div className='gedetails'>
                    <div className='gedetails-shanc'>
                        <h2>
                            {loadsh.shanc}
                        </h2>
                    </div>
                    <div className='gedetails-loadsh'>
                        <div className='gedetails-loadsh-text'>
                            <div className='gedetails-loadsh-text-img'>
                                <img src={loadsh.image} alt="" />
                            </div>
                            <div className='gedetails-loadsh-text-title'>
                                <p>
                                    {loadsh.name}
                                </p>
                                <p>
                                    科普{loadsh.goodsNum}
                                </p>
                            </div>
                        </div>
                        <div className='gedetails-loadsh-sd'>
                            <button onClick={() => hangdleClick()}>
                                关注
                            </button>
                        </div>
                        <div className='gedetails-loadsh-fd'>
                            <div style={{
                                marginLeft: '10px'
                            }}>
                                作者: {loadsh.name}

                                {loadsh.type}

                                {loadsh.hospital}
                                {loadsh.keshi}
                            </div>
                        </div>
                    </div>
                    <div className='gedetails-title'>
                        {loadsh.content}
                    </div>
                </div><div className='demo-action-bar'>
                    <ActionBar>
                        <Input
                            onClick={() => setButtoon('bottom')}
                            className='input-demo'
                            placeholder='请输入文本'
                            clearable />
                        <ActionBar.Icon
                            icon={show ? <GoodJob /> : <GoodJobO />}
                            text='点赞'
                            onClick={givealike} />
                        <ActionBar.Icon
                            icon={<StarO />}
                            text='收藏'
                            onClick={() => console.log('cart click')} />
                        <ActionBar.Icon
                            icon={<ShopO />}
                            text='举报'
                            onClick={() => console.log('shop click')} />
                    </ActionBar>
                </div><Popup
                    visible={buttoon === 'bottom'}
                    style={{ height: '20%' }}
                    position='bottom'
                    onClose={onClose}
                >
                    <Input.TextArea placeholder="说两句吧" maxLength={200} showWordLimit />
                    <div className='bottom-feb'>
                        <div className='bottom'>
                            <p>
                                评论区不能询问问题
                            </p>
                            <p className='bottom-p' onClick={() => Pinpayment(loadsh)}>
                                点击这里咨询 &gt;
                            </p>
                        </div>
                    </div>
                </Popup>
            </div>
        </div>
    )
}

export default index